<template>
   <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
      <el-form-item label="旧密码" prop="oldPassword" style="position: relative;">
          <img style="position: absolute;width: 15px;height: 15px;top: 6px;left: -68px;" src="https://image.nanjingtouyang.com/touy/2024/01/11/346f9fbcc11e4d81a2a22b3d442515b5.png" alt="">
         <el-input v-model="oldPassword" placeholder="请输入旧密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
         <el-input @blur="getNewPassword" v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
         <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="danger" @click="close">关闭</el-button>
      </el-form-item>
   </el-form>
</template>

<script setup>
import { updateUserPwd } from "@/api/system/user";
import { ElMessage } from "element-plus";
import useUserStore from '@/store/modules/user'

// import { onMounted } from 'vue';
const props = defineProps({
  phone: {
    type: String
  }
});

const userStore = useUserStore()
const { proxy } = getCurrentInstance();

const passwordInput = ref(true)
const oldPassword = ref('')

getPhone();

var user = reactive({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined
});


const equalToPassword = (rule, value, callback) => {
  if (user.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const rules = ref({
  // oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 8, max: 20, message: "长度在 8 到 20 个字符", trigger: "blur" }],
  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
});

function getPhone() {
  if(userStore.pwdDef == 1) {
    let psw = props.phone.slice(-6)
    psw = 'touy' + psw
    oldPassword.value = psw
  }
}


/** 提交按钮 */
function submit() {
  if(oldPassword.value == '') {
    ElMessage.error('旧密码不能为空')
    return
  } 
  if(passwordInput.value == false) {
    ElMessage.error('密码必须是8-20位英文字母、数字、字符组合（不能是纯数字）')
  } else {
    proxy.$refs.pwdRef.validate(valid => {
      if (valid) {
        updateUserPwd(oldPassword.value, user.newPassword).then(response => {
          proxy.$modal.msgSuccess("修改成功");
        });
      }
    });
  }
 
};
/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
};

function getNewPassword() {
  const strongRegex = /^(?=.*\d)(?=.*[a-zA-Z])|(?=.*\d)(?=.*[\W_])|(?=.*[a-zA-Z])(?=.*[\W_]).*$/;
  if (!strongRegex.test(user.newPassword)) {
      passwordInput.value = false
      ElMessage.error('密码必须是8-20位英文字母、数字、字符组合（不能是纯数字）')
  }else {
    passwordInput.value = true
  }
}
</script>
